---
title: Bouton Connect personnalisé
description: Création d'un bouton Connect personnalisé
---

# Bouton Connect personnalisé

## Création d'un bouton Connect personnalisé

Vous pouvez utiliser le bas niveau `ConnectButton.Custom` pour créer votre propre bouton de connexion personnalisé. Ce composant rend une fonction qui inclut tout ce dont vous avez besoin pour réimplémenter les boutons intégrés.

Une réimplémentation minimale des boutons intégrés ressemblerait à ceci :

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return (
    <ConnectButton.Custom>
      {({
        account,
        chain,
        openAccountModal,
        openChainModal,
        openConnectModal,
        authenticationStatus,
        mounted,
      }) => {
        // Note: If your app doesn't use authentication, you
        // can remove all 'authenticationStatus' checks
        const ready = mounted && authenticationStatus !== 'loading';
        const connected =
          ready &&
          account &&
          chain &&
          (!authenticationStatus ||
            authenticationStatus === 'authenticated');

        return (
          <div
            {...(!ready && {
              'aria-hidden': true,
              'style': {
                opacity: 0,
                pointerEvents: 'none',
                userSelect: 'none',
              },
            })}
          >
            {(() => {
              if (!connected) {
                return (
                  <button onClick={openConnectModal} type="button">
                    Connect Wallet
                  </button>
                );
              }

              if (chain.unsupported) {
                return (
                  <button onClick={openChainModal} type="button">
                    Wrong network
                  </button>
                );
              }

              return (
                <div style={{ display: 'flex', gap: 12 }}>
                  <button
                    onClick={openChainModal}
                    style={{ display: 'flex', alignItems: 'center' }}
                    type="button"
                  >
                    {chain.hasIcon && (
                      <div
                        style={{
                          background: chain.iconBackground,
                          width: 12,
                          height: 12,
                          borderRadius: 999,
                          overflow: 'hidden',
                          marginRight: 4,
                        }}
                      >
                        {chain.iconUrl && (
                          <img
                            alt={chain.name ?? 'Chain icon'}
                            src={chain.iconUrl}
                            style={{ width: 12, height: 12 }}
                          />
                        )}
                      </div>
                    )}
                    {chain.name}
                  </button>

                  <button onClick={openAccountModal} type="button">
                    {account.displayName}
                    {account.displayBalance
                      ? ` (${account.displayBalance})`
                      : ''}
                  </button>
                </div>
              );
            })()}
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
};
```

Les propriétés suivantes sont passées à votre fonction de rendu.

### Propriétés du compte

<PropsTable
  data={[
    {
      name: 'account',
      required: false,
      type: 'object | undefined',
      description:
        "Objet contenant les détails sur le compte actuel, décrit ci-dessous",
    },
    {
      name: 'account.address',
      required: false,
      type: 'string',
      description: (
        <>
          L'adresse complète du compte, par exemple
          "0x7a3d05c70581bD345fe117c06e45f9669205384f"
        </>
      ),
    },
    {
      name: 'account.balanceDecimals',
      required: false,
      type: 'string | undefined	',
      description: "Le solde du compte en décimales",
    },
    {
      name: 'account.balanceFormatted',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Le solde du compte formaté en tant que chaîne, par exemple{' '}
          <code>1.234567890123456789</code>
        </>
      ),
    },
    {
      name: 'account.balanceSymbol',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Le symbole de la devise pour le solde, par exemple <code>ETH</code>
        </>
      ),
    },
    {
      name: 'account.displayBalance',
      required: false,
      type: 'string | undefined	',
      description: (
        <>
          Le solde formaté aux 3 chiffres significatifs, plus le
          symbole, par exemple <code>1.23 ETH</code>
        </>
      ),
    },
    {
      name: 'account.displayName',
      required: false,
      type: 'string',
      description: (
        <>
          Le nom ENS, ou une version tronquée de l'adresse, par exemple{' '}
          <code>"rainbowwallet.eth"</code> ou <code>"0x7a…384f"</code>
        </>
      ),
    },
    {
      name: 'account.ensAvatar',
      required: false,
      type: 'string	| undefined',
      description: "L'URI de l'avatar ENS",
    },
    {
      name: 'account.ensName',
      required: false,
      type: 'string	| undefined',
      description: (
        <>
          Le nom ENS, par exemple <code>rainbowwallet.eth</code>
        </>
      ),
    },
    {
      name: 'account.hasPendingTransactions',
      required: false,
      type: 'boolean',
      description:
        "Booléen indiquant si le compte a des transactions en attente pour la chaîne actuelle",
    },
  ]}
/>

### Propriétés de la chaîne

<PropsTable
  data={[
    {
      name: 'chain',
      required: false,
      type: 'object | undefined',
      description:
        "Objet contenant les détails sur la chaîne actuelle, décrit ci-dessous",
    },
    {
      name: 'chain.hasIcon',
      required: false,
      type: 'boolean',
      description: "Si la chaîne a un icône spécifié",
    },
    {
      name: 'chain.iconUrl',
      required: false,
      type: 'string | undefined',
      description:
        "L'URL de l'icône de la chaîne (qui peut également être indéfinie lors du téléchargement des URL de données Base64)",
    },
    {
      name: 'chain.iconBackground',
      required: false,
      type: 'string | undefined',
      description:
        "L'arrière-plan de l'icône de la chaîne qui sera visible pendant le chargement des images",
    },
    {
      name: 'chain.id',
      required: false,
      type: 'number',
      description: (
        <>
          L'identifiant de la chaîne, par exemple <code>1</code>
        </>
      ),
    },
    {
      name: 'chain.name',
      required: false,
      type: 'string | undefined',
      description: (
        <>
          Le nom de la chaîne, par exemple <code>"Ethereum"</code>
        </>
      ),
    },
    {
      name: 'chain.unsupported',
      required: false,
      type: 'boolean | undefined',
      description:
        "Booléen indiquant si la chaîne actuelle n'est pas supportée",
    },
  ]}
/>

### Propriétés de l'état du modal

<PropsTable
  data={[
    {
      name: 'openAccountModal',
      required: false,
      type: '() => void',
      description: "Fonction pour ouvrir le modal du compte",
    },
    {
      name: 'openChainModal',
      required: false,
      type: '() => void',
      description: "Fonction pour ouvrir le modal de la chaîne",
    },
    {
      name: 'openConnectModal',
      required: false,
      type: '() => void',
      description: "Fonction pour ouvrir le modal de connexion",
    },
    {
      name: 'accountModalOpen',
      required: false,
      type: 'boolean',
      description:
        "Booléen indiquant si le modal du compte est ouvert",
    },
    {
      name: 'chainModalOpen',
      required: false,
      type: 'boolean',
      description: "Booléen indiquant si le modal de la chaîne est ouvert",
    },
    {
      name: 'connectModalOpen',
      required: false,
      type: 'boolean',
      description:
        "Booléen indiquant si le modal de connexion est ouvert",
    },
  ]}
/>

### Propriétés de l'état général

<PropsTable
  data={[
    {
      name: 'mounted',
      required: false,
      type: 'boolean',
      description:
        "Booléen indiquant si le composant est monté",
    },
    {
      name: 'authenticationStatus',
      required: false,
      type: '"loading" | "unauthenticated" | "authenticated" | undefined',
      description:
        "L'état de l'authentification, ou undefined si l'authentification n'a pas été configurée",
    },
  ]}
/>
